<script setup>
import { reactive, ref, onMounted } from 'vue';

// 接收页面传入的当前路径参数
const props = defineProps({
  currentPath: {
    type: String,
    required: true
  }
});

const state = reactive({
  tabList: [
    {
      pagePath: "/pages/home/home",
      text: "首页",
      iconPath: "/static/home.png",
      selectedIconPath: "/static/homeSelect.png",
      roles: ['user'] // 所有角色可见
    },
    {
      pagePath: "/pages/activity/activity",
      text: "活动",
      iconPath: "/static/activity.png",
      selectedIconPath: "/static/activitySelect.png",
      roles: ['all'] // 所有角色可见
    },
    {
      pagePath: "/pages/mine/mine",
      text: "我的",
      iconPath: "/static/mine.png",
      selectedIconPath: "/static/mineSelect.png",
      roles: ['user'] // 所有角色可见
    },
    {
      pagePath: "/pages/domicile/domicile",
      text: "用户管理",
      iconPath: "/static/domicile.png",
      selectedIconPath: "/static/domicileSelect.png",
      roles: ['admin'] // 仅管理员可见
    }
  ],
  userRole: ''
});

// 切换页面
const switchTab = (item) => {
  if (props.currentPath !== item.pagePath) {
    uni.switchTab({
      url: item.pagePath
    });
  }
};

// 根据角色过滤显示的标签页
const getVisibleTabs = () => {
  return state.tabList.filter(item => 
    item.roles.includes('all') || item.roles.includes(state.userRole)
  );
};

// 初始化用户角色
const initTabbar = () => {
  const userInfo = uni.getStorageSync('userInfo');
  state.userRole = userInfo?.role || '';
};

// 监听页面显示
uni.$on('updateTabbar', () => {
  initTabbar();
});

// 组件挂载时初始化
onMounted(() => {
  initTabbar();
});
</script>

<template>
  <view class="custom-tabbar">
    <view
      class="tabbar-item"
      v-for="(item, index) in getVisibleTabs()"
      :key="index"
      @tap="switchTab(item)"
    >
      <image
        :src="currentPath === item.pagePath ? item.selectedIconPath : item.iconPath"
        class="tabbar-icon"
      />
      <text
        class="tabbar-text"
        :class="{ active: currentPath === item.pagePath }"
      >{{ item.text }}</text>
    </view>
  </view>
</template>

<style lang="scss">
.custom-tabbar {
  width: 100%;
  height: 100rpx;
  background: #FFFFFF;
  position: fixed;
  bottom: 0;
  left: 0;
  display: flex;
  padding-bottom: env(safe-area-inset-bottom);
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
  
  .tabbar-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    
    .tabbar-icon {
      width: 48rpx;
      height: 48rpx;
      margin-bottom: 4rpx;
    }
    
    .tabbar-text {
      font-size: 24rpx;
      color: #666666;
      
      &.active {
        color: #f24e34;
      }
    }
  }
}
</style> 